<template>
  <div class="text" id="text">
    <div class="text_div">
      <p class="text_tit">文字</p>
      <div @click="copyTextClick" class="picture_button clickdiv">
        <img :src="img.xinjian" alt="" />
        <span>复制文字</span>
      </div>
      <div @click="addTextClick" class="picture_button clickdiv">
        <img :src="img.xinjianwenzi" alt="" />
        <span>添加文字</span>
      </div>
      <div class="text_text">
        <p class="text_tit">编辑文本</p>
        <div class="text_con">
          <textarea
              class="text_blur"
              contenteditable="plaintext-only"
              @input="textInput"
              v-text="context"
              ref="textarea"
              id="task-edit"
          ></textarea>
        </div>
      </div>
      <div
        class="text_fam"
        @click="textFamilyClick"
        @mouseleave="textFamilyMouseleave"
      >
        <p>{{ selectDefault }}</p>
        <img
          :src="img.xaila"
          :style="{
            transform: textFamilylist ? 'rotate(0deg)' : 'rotate(180deg)',
          }"
        />
        <ul class="text_ul" v-show="textFamilylist">
          <li
            v-for="(v, i) in selectClassData"
            :key="i"
            @click="textFamilyListClick(i)"
          >
            <p :style="{ fontFamily: v.fam }">{{ v.text }}</p>
          </li>
        </ul>
      </div>
      <div
        class="text_num text_fontsize"
        @mouseenter="textsizemouseenter"
        @mouseleave="textSizeMouseleave(0)"
      >
        <input
          max="500"
          min="0"
          type="number"
          :value="fontsizemoel"
          @input="fontsizeInput"
        />
        <div class="text_bot">
          <img :src="img.fanhui" @click="fontsizeModified(1)" alt="" />
          <img :src="img.xaila" @click="fontsizeModified(-1)" alt="" />
        </div>
        <ul class="text_ul textSizelist" v-if="textSizelist">
          <!-- @mouseenter="textSizeMouseleave(1)" -->
          <li
            v-for="(v, i) in fontsizeList"
            :key="i"
            @click="textSizeListClick(v)"
          >
            <p>{{ v }}</p>
          </li>
        </ul>
      </div>
      <div class="text_style1">
        <div class="" v-for="(v, i) in styleList1" :key="i">
          <el-tooltip
            class="item"
            effect="dark"
            popper-class="tooltip"
            :content="v.text"
            placement="bottom"
          >
            <div class="style1_div">
              <img :src="v.check ? v.img1 : v.img" @click="style1Click(i)" />
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="text_div1">
      <div class="style2_div">
        <div class="'stylediv'" v-for="(v, i) in styleList2" :key="i">
          <el-tooltip
            class="item"
            effect="dark"
            popper-class="tooltip"
            :content="v.text"
            placement="bottom"
          >
            <div
              :class="[
                v.check ? 'active2' : '',
                listNottetool.verticaltext ? 'dontclick' : '',
              ]"
              @click="style2Click(i)"
            >
              <img :src="v.img" />
            </div>
          </el-tooltip>
        </div>
      </div>
      <div class="style3_div">
        <div
          class="'stylediv1'"
          v-for="(v, i) in styleList3"
          :key="i"
          @click.stop
        >
          <!-- v-clickoutside="textaClick(1)" -->
          <el-tooltip
            class="item"
            popper-class="tooltip"
            effect="dark"
            :content="v.text"
            placement="bottom"
          >
            <div :class="[, v.check ? 'active2' : '']" @click="style3Click(i)">
              <img :src="v.img ? v.img : ''" />
            </div>
          </el-tooltip>
        </div>
        <!-- 字间距 -->
        <div v-if="styleList3[1].check" class="style3_card1" @click.stop>
          <!-- v-clickoutside="textaClick" -->
          <div class="style3_range">
            <input
              type="range"
              min="0"
              max="100"
              step="0.1"
              ref="range"
              @input="letterSpacingInput()"
              @mousedown="rangeInputdragstart"
              @mouseup="rangeInputdragend"
              :style="{
                backgroundSize: `${listNottetool.letterSpacing}% 100%`,
              }"
              v-model.number="listNottetool.letterSpacing"
            />
          </div>
          <div class="style3_num">
            <div class="style3_num_div">
              <p>{{ listNottetool.letterSpacing }}</p>
              <div class="style3_text_bot">
                <img :src="img.fanhui" @click="letterSpacingClick(1)" alt="" />
                <img :src="img.xaila" @click="letterSpacingClick(-1)" alt="" />
              </div>
            </div>
          </div>
        </div>
        <!-- 行间距 -->
        <div v-if="styleList3[2].check" class="style3_card2" @click.stop>
          <!-- v-clickoutside="textaClick" -->
          <div class="style3_range">
            <input
              type="range"
              min="0.1"
              max="10"
              step="0.1"
              ref="range"
              @input="lineHeightInput()"
              @mousedown="rangeInputdragstart"
              @mouseup="rangeInputdragend"
              :style="{
                backgroundSize: `${listNottetool.lineHeight * 10}% 100%`,
              }"
              v-model.number="listNottetool.lineHeight"
            />
          </div>
          <div class="style3_num">
            <div class="style3_num_div">
              <p>{{ listNottetool.lineHeight }}</p>
              <div class="style3_text_bot">
                <img :src="img.fanhui" @click="lineHeightClick(0.1)" alt="" />
                <img :src="img.xaila" @click="lineHeightClick(-0.1)" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text_div2">
      <div class="text_line">
        <div class="">
          <p class="text_tit">描边</p>
        </div>
        <div class="text_outline">
          <div class="text_out">
            <p>颜色</p>
            <input
              type="color"
              class="text_color"
              v-model="listNottetool.stroke"
              @change="rangeInputdragend"
            />
          </div>
          <div class="text_nums">
            <p>宽度</p>
            <div class="text_num">
              <input
                maxlength="2"
                type="text"
                v-model.number.trim="listNottetool.strokeWidth"
              />
              <div class="text_bot">
                <img
                  :src="img.fanhui"
                  @click="listNottetool.strokeWidth++"
                  alt=""
                />
                <img
                  :src="img.xaila"
                  @click="listNottetool.strokeWidth--"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="text_del" @click="strokedelClick">
            <img :src="img.del" alt="" srcset="" />
          </div>
        </div>
      </div>
      <div class="text_shadow">
        <div class="">
          <p class="text_tit">阴影</p>
        </div>
        <div class="text_sha">
          <div class="text_dow">
            <p>颜色</p>
            <input
              type="color"
              class="text_color"
              v-model="listNottetool.shadowColor"
            />
          </div>
          <div class="text-shaow">
            <div class="text_nums">
              <p>模糊</p>
              <div class="text_num">
                <input
                  maxlength="2"
                  type="text"
                  v-model="listNottetool.shadowBlur"
                />
                <div class="text_bot">
                  <img
                    :src="img.fanhui"
                    @click="listNottetool.shadowBlur++"
                    alt=""
                  />
                  <img
                    :src="img.xaila"
                    @click="listNottetool.shadowBlur--"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="text_outs">
              <p>X</p>
              <div class="text_out">
                <input
                  type="text"
                  maxlength="2"
                  v-model.number.trim="listNottetool.shadowOffsetX"
                />
              </div>
              <p>Y</p>
              <div class="text_out">
                <input
                  type="text"
                  maxlength="2"
                  v-model.number.trim="listNottetool.shadowOffsetY"
                />
              </div>
            </div>
          </div>
          <div class="text_del" @click="shadowdelClick">
            <img :src="img.del" alt="" srcset="" />
          </div>
        </div>
      </div>
    </div>
    <div class="text_div3">
      <p class="text_tit">字体颜色</p>
      <input type="color" class="text_color" v-model="listNottetool.fill" />
      <p class="text_tit">首字颜色</p>
      <input type="color" class="text_color" />
    </div>
    <div class="text_div4">
      <div class="picture_range">
        <p class="picture_range_tit">不透明度</p>
        <div class="">{{ rangeV + "%" }}</div>
      </div>
      <input
        type="range"
        min="0"
        max="1"
        step="0.01"
        ref="range"
        @input="rangeInput()"
        :style="{ backgroundSize: rangeCSS }"
        v-model.number="listNottetool.opacity"
        @mousedown="rangeInputdragstart"
        @mouseup="rangeInputdragend"
      />
      <div class="picture_tool">
        <div
          class="picture_tools"
          v-for="(v, i) in pictureTool"
          :key="i"
          :style="{ background: v.select ? ' #d4d4d4' : '#fff' }"
          @click="picturetoolsClick(i)"
        >
          <el-tooltip
            class="item"
            popper-class="tooltip"
            effect="dark"
            :content="v.text"
            placement="bottom"
          >
            <img :src="v.img" alt="" />
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mixin from "@/utils/mixin";
// import lodash from "lodash";
import { mapState } from "vuex";
let maps = {
  "A":0,"B":1,"C":2,"D":3,"E":4,"F":5,"G":6,"H":7,"I":8,"J":9,"K":10,"L":11,"M":12,"N":13,"O":14,"P":15,"Q":16,"R":17,"S":18,"T":19,"U":20,"V":21,"W":22,"X":23,"Y":24,"Z":25,"a":0,"b":1,"c":2,"d":3,"e":4,"f":5,"g":6,"h":7,"i":8,"j":9,"k":10,"l":11,"m":12,"n":13,"o":14,"p":15,"q":16,"r":17,"s":18,"t":19,"u":20,"v":21,"w":22,"x":23,"y":24,"z":25,
}
export default {
  mixins: [mixin],
  data() {
    return {
      //下拉框默认值
      selectDefault: "微软雅黑",
      selectClassData: [
        {
          text: "微软雅黑",
          fam: "Microsoft YaHei",
        },
        {
          text: "华文楷体",
          fam: "STKaiti",
        },
        {
          text: "华文宋体",
          fam: "STSong",
        },
        {
          text: "华文仿宋",
          fam: "STFangsong",
        },
        {
          text: "黑体",
          fam: "SimHei",
        },
        {
          text: "宋体",
          fam: "SimSun",
        },
        {
          text: "新宋体",
          fam: "NSimSun",
        },
        {
          text: "仿宋",
          fam: "FangSong",
        },
        {
          text: "楷体",
          fam: "KaiTi",
        },
        {
          text: "幼圆",
          fam: "YouYuan",
        },
        {
          text: "华文新魏",
          fam: "STXinwei",
        },
        {
          text: "汉标康熙字典内府简",
          fam: "Kangxi-Dictionary",
        },
        {
          text: "彩虹高光",
          fam: "caihonggaoguang",
        },
        {
          text: "初林体",
          fam: "chulinti",
        },
        {
          text: "方正初刻",
          fam: "fangzhegxinke",
        },
        {
          text: "方正卡通",
          fam: "fangzhengkatong",
        },
        {
          text: "方正隶变",
          fam: "fangzhenglibian",
        },
        {
          text: "方正稚艺",
          fam: "fangzhengzhiyi",
        },
        {
          text: "勾玉行书",
          fam: "gouyuxingshu",
        },
        {
          text: "汉仪超粗宋简",
          fam: "hanyichaocusongjian",
        },
        {
          text: "江南手书",
          fam: "jiangnanshoushu",
        },
        {
          text: "萌趣软糖",
          fam: "mengquruantang",
        },
        {
          text: "时光手札",
          fam: "shiguangshouzha",
        },
        {
          text: "武林江湖",
          fam: "wulinjianghu",
        },
        {
          text: "御守锦书",
          fam: "yushoujinshu",
        },
        {
          text: "隶书",
          fam: "stliti",
        },
      ],
      fontsizeList: [
        12, 18, 24, 36, 48, 60, 72, 96, 108, 120, 140, 160, 180, 220, 250, 300,
        400, 500,
      ],
      //字体大小
      fontsize: 16,
      textFamilylist: false,
      textSizelist: false,
      //描边
      outline: 0,
      //阴影
      shadowX: 0,
      shadowY: 0,
      //style
      styleList1: [
        {
          img: require("@/assets/img/B.png"),
          img1: require("@/assets/img/B选中.png"),
          check: false,
          text: "加粗",
        },
        {
          img: require("@/assets/img/I.png"),
          img1: require("@/assets/img/I选中.png"),
          check: false,
          text: "斜体",
        },
        {
          img: require("@/assets/img/u.png"),
          img1: require("@/assets/img/u选中.png"),
          check: false,
          text: "下划线",
        },
        {
          img: require("@/assets/img/T.png"),
          img1: require("@/assets/img/T选中.png"),
          check: false,
          text: "删除线",
        },
      ],
      styleList2: [
        {
          img: require("@/assets/img/左对齐.png"),
          check: false,
          text: "左对齐",
        },
        {
          img: require("@/assets/img/居中1.png"),
          check: false,
          text: "居中对齐",
        },
        {
          img: require("@/assets/img/右对齐.png"),
          check: false,
          text: "右对齐",
        },
      ],
      styleList3: [
        {
          img: require("@/assets/img/文字间距.png"),
          check: false,
          text: "文字方向",
        },
        {
          img: require("@/assets/img/文字行距.png"),
          check: false,
          text: "字间距",
        },
        {
          img: require("@/assets/img/段落行距.png"),
          check: false,
          text: "行间距",
        },
      ],
      //锁&删除
      pictureTool: [
        { img: require("@/assets/img/key.png"), select: false, text: "上锁" },
        { img: require("@/assets/img/del.png"), select: false, text: "删除" },
      ],
      //滑动条
      rangeV: 30,
      rangeCSS: "",
      //文本的行数
      lineNum: "",
      //文本列数
      spacingNum: "",
      //文本内容-行
      context: "",
      //文本内容-列
      linecontext: "",
      //
      flag: true,
      //
      name: "",
    };
  },
  computed: {
    ...mapState("templateStage", [
      "modifyele",
      "ellipsetool",
      "listEllipse",
      "listNote",
      "listImg",
      "listEllipse",
      "listNottetool",
      "historylist",
    ]),
    fontsizemoel() {
      return Math.ceil(this.listNottetool.fontSize * this.listNottetool.scaleX);
    },
    rules:{
      get(){
        return this.$store.state.templateStage.rules
      },
      set(val){
        return this.$store.state.templateStage.rules = val
      }
    },
  },
  watch: {
    listNottetool: {
      handler: function () {
        this.context = this.listNottetool.originaltext;
        //字体
        this.initializationText();
        //排列方式
      },
    },
    "listNottetool.fontSize": {
      handler() {
        this.verticaltool();
      },
    },
    "listNottetool.shadowOffsetY": {
      handler(newVal, oldVal) {
        if (this.historylist.length == 0)
          this.$emit("childhistory", "shadowOffsetY", oldVal, this.modifyele);
        this.rangeInputdragend();
      },
    },
    "listNottetool.shadowOffsetX": {
      handler(newVal, oldVal) {
        if (this.historylist.length == 0)
          this.$emit("childhistory", "shadowOffsetX", oldVal, this.modifyele);
        this.rangeInputdragend();
      },
    },
    "listNottetool.shadowBlur": {
      handler(newVal, oldVal) {
        if (this.historylist.length == 0)
          this.$emit("childhistory", "shadowBlur", oldVal, this.modifyele);
        this.rangeInputdragend();
      },
    },
    "listNottetool.shadowColor": {
      handler(newVal, oldVal) {
        if (this.historylist.length == 0)
          this.$emit("childhistory", "shadowColor", oldVal, this.modifyele);
        this.rangeInputdragend();
      },
    },
    "listNottetool.fill": {
      handler(newVal, oldVal) {
        if (this.historylist.length == 0)
          this.$emit("childhistory", "fill", oldVal, this.modifyele);
        this.rangeInputdragend();
      },
    },
    "listNottetool.stroke": {
      handler(newVal, oldVal) {
        if (this.historylist.length == 0)
          this.$emit("childhistory", "stroke", oldVal, this.modifyele);
        this.rangeInputdragend();
      },
    },
    "listNottetool.strokeWidth": {
      handler(newVal, oldVal) {
        if (this.historylist.length == 0)
          this.$emit("childhistory", "strokeWidth", oldVal, this.modifyele);
        this.rangeInputdragend();
      },
    },
    immediate: true,
    deep: true, // 表示开启深度监听
  },
  methods: {
    textSizeListClick(v) {
      this.listNottetool.scaleX = v / this.listNottetool.fontSize;
      this.listNottetool.scaleY = v / this.listNottetool.fontSize;
      this.textsizemouseenter();
    },
    fontsizeInput(e) {
      this.listNottetool.scaleX = e.target.value / this.listNottetool.fontSize;
      this.listNottetool.scaleY = e.target.value / this.listNottetool.fontSize;
    },
    fontsizeModified(value) {
      let num = this.fontsizemoel + value;
      this.listNottetool.scaleX = num / this.listNottetool.fontSize;
      this.listNottetool.scaleY = num / this.listNottetool.fontSize;
    },
    rangeInputdragstart() {
      if (this.historylist.length == 0) this.$emit("deductchild");
    },
    rangeInputdragend() {
      this.$emit("deductchild");
    },
    letterSpacingClick(value) {
      if (this.historylist.length == 0) this.$emit("deductchild");
      if (this.listNottetool.letterSpacing > 100 && value == 1) return;
      else if (this.listNottetool.letterSpacing < 1 && value == -1) return;
      else {
        let num = this.listNottetool.letterSpacing + value;
        this.listNottetool.letterSpacing = Number(num.toFixed(1));
        this.letterSpacingInput();
      }
      this.$emit("deductchild");
    },
    lineHeightClick(value) {
      if (this.historylist.length == 0) this.$emit("deductchild");
      if (this.listNottetool.lineHeight > 9.9 && value == 0.5) return;
      else if (this.listNottetool.lineHeight < 0.1 && value == -0.1) return;
      else {
        let num = this.listNottetool.lineHeight + value;
        this.listNottetool.lineHeight = Number(num.toFixed(1));
        this.lineHeightInput();
      }
      this.$emit("deductchild");
    },
    copyTextClick() {
      this.$emit("copy");
    },
    addTextClick() {
      this.$emit("add");
    },

    //改变文字内容，盒子宽高
    textLineSpactBox(context) {
      this.listNottetool.text = context;
      //行
      this.lineNum = this.$datatools.lineNumData(context);
      this.listNottetool.lineNum = this.lineNum;
      //列
      this.spacingNum = this.$datatools.verticalNumData(context);
      this.listNottetool.spacingNum = this.spacingNum;
      //计算宽高
      this.lineHeightInput();
      this.letterSpacingInput();
    },
    //字间距改变
    letterSpacingInput(letterSpacing = this.listNottetool.letterSpacing) {
      this.listNottetool.width =
        //字数长
        this.listNottetool.fontSize * this.listNottetool.spacingNum +
        //行间距
        (this.listNottetool.spacingNum - 1) * letterSpacing;
    },
    //行间距改变
    lineHeightInput(lineHeight = this.listNottetool.lineHeight) {
      this.listNottetool.height =
        this.listNottetool.fontSize * this.listNottetool.lineNum +
        this.listNottetool.lineNum *
          (lineHeight - 1) *
          this.listNottetool.fontSize;
    },
    //滑动条-滑动
    rangeInput() {
      let { opacity } = this.listNottetool;
      opacity = opacity * 100;
      this.rangeCSS = opacity + "% 100%";
      this.rangeV = parseInt(opacity);
    },
    // 下拉框
    textFamilyClick() {
      this.textFamilylist = !this.textFamilylist;
    },

    textsizemouseenter() {
      this.textSizelist = !this.textSizelist;
    },
    textFamilyMouseleave() {
      setTimeout(() => {
        this.textFamilylist = false;
      }, 800);
    },
    textSizeMouseleave(type) {
      if (type == 0) {
        setTimeout(() => {
          this.textSizelist = false;
        }, 800);
      } else this.textSizelist = true;
    },

    textFamilyListClick(i) {
      if (this.historylist.length == 0) this.$emit("deductchild");
      this.selectDefault = this.selectClassData[i].text;
      this.listNottetool.fontFamily = this.selectClassData[i].fam;
      this.$emit("deductchild");
    },
    style1Click(i) {
      this.styleList1[i].check = !this.styleList1[i].check;
      if (this.historylist.length == 0) this.$emit("deductchild");
      if (i == 0) {
        //文本加粗
        if (this.styleList1[0].check)
          this.$store.commit("templateStage/TEXTWEIGHT", true);
        else this.$store.commit("templateStage/TEXTWEIGHT", false);
      } else if (i == 1) {
        //文本斜体
        if (this.styleList1[1].check)
          this.$store.commit("templateStage/TEXTITALIC", true);
        else this.$store.commit("templateStage/TEXTITALIC", false);
      } else if (i == 2) {
        //文本下划线
        if (this.styleList1[2].check)
          this.$store.commit("templateStage/TEXTUNDERLINE", true);
        else this.$store.commit("templateStage/TEXTUNDERLINE", false);
      } else if (i == 3) {
        //删除线
        if (this.styleList1[3].check)
          this.$store.commit("templateStage/TEXTDELLINE", true);
        else this.$store.commit("templateStage/TEXTDELLINE", false);
      }
      this.$emit("deductchild");
    },
    style2Click(i) {
      if (!this.listNottetool.verticaltext) {
        if (this.historylist.length == 0) this.$emit("deductchild");
        this.styleList2.forEach((v) => {
          v.check = false;
        });
        this.styleList2[i].check = true;
        if (this.listNottetool.verticaltext)
          this.$store.commit("templateStage/TEXTVERTICAL", i);
        else this.$store.commit("templateStage/TEXTALIGN", i);
        this.$emit("deductchild");
      }
    },
    style3Click(i) {
      this.styleList3[i].check = !this.styleList3[i].check;
      if (i == 0) {
        this.styleList3[1].check = false;
        this.styleList3[2].check = false;
        if (this.historylist.length == 0) this.$emit("deductchild");
        if (this.styleList3[0].check) {
          //竖向选中
          this.listNottetool.verticaltext = true;
          this.$store.commit("templateStage/TEXTVERTICALTEXT", true);
          let context = this.$datatools.TtoDBC(this.context);
          this.listNottetool.text = this.$datatools.lineFeedCutData(context);
          this.textLineSpactBox(this.listNottetool.text);
        } else {
          //取消竖向选中
          this.listNottetool.verticaltext = false;
          this.$store.commit("templateStage/TEXTVERTICALTEXT", false);
          let context = this.$datatools.ToCDB(this.context);
          this.listNottetool.text = context;
          this.textLineSpactBox(this.listNottetool.text);
        }
        this.$emit("deductchild");
      } else if (i == 1) this.styleList3[2].check = false;
      else if (i == 2) this.styleList3[1].check = false;
    },
    //竖向显示
    verticaltool() {
      this.letterSpacingInput();
      this.lineHeightInput();
    },
    draggabletool() {
      if (this.listNottetool.draggable == false)
        this.pictureTool[0].select = true;
      else this.pictureTool[0].select = false;
    },
    picturetoolsClick(i) {
      if (this.historylist.length == 0) this.$emit("deductchild");
      let { select } = this.pictureTool[i];
      this.pictureTool[i].select = !select;
      //上锁
      if (i == 0) {
        //选中
        if (this.pictureTool[i].select) {
          this.$emit("nonechild");
          this.$store.commit("templateStage/TEXTADDKEYELE", this.modifyele);
          this.$emit("addtrans", this.modifyele);
        } else {
          this.$store.commit("templateStage/TEXTDELKEYELE", this.modifyele);
          this.$emit("addtrans", this.modifyele);
        }
      } else if (i == 1) {
        if (this.pictureTool[i].select) {
          this.listNote.forEach((v, index) => {
            if (v.config.name == this.modifyele) {
              this.$store.commit("templateStage/TEXTDELLISTIMG", index);
              this.$emit("delchild", false);
            }
          });
        }
      }
      this.$emit("deductchild");
    },
    //删除描边
    strokedelClick() {
      this.$store.commit("templateStage/TEXTDELSTROKE");
    },
    //删除阴影
    shadowdelClick() {
      this.$store.commit("templateStage/TEXTDELSHADOW");
    },
    //初始化文本
    initializationText() {
      //文本的行数
      this.lineNum = this.listNottetool.lineNum;
      //文本列数
      this.spacingNum = this.listNottetool.spacingNum;
      //文字风格
      this.selectClassData.forEach((v) => {
        if (v.fam == this.listNottetool.fontFamily) this.selectDefault = v.text;
      });
      //加粗
      this.initializationTextstyleList1("fontStyle", "bold", 0);
      //倾斜
      this.initializationTextstyleList1("fontStyle", "italic", 1);
      //下划线
      this.initializationTextstyleList1("textDecoration", "underline", 2);
      //删除线
      this.initializationTextstyleList1("textDecoration", "line-through", 3);
      //文本对齐方式
      this.styleList2.forEach((v) => (v.check = false));
      if (this.listNottetool.align.indexOf("left") != -1)
        this.styleList2[0].check = true;
      else if (this.listNottetool.align.indexOf("center") != -1)
        this.styleList2[1].check = true;
      else if (this.listNottetool.align.indexOf("right") != -1)
        this.styleList2[2].check = true;
      //文本竖向
      if (this.listNottetool.verticaltext) {
        this.listNottetool.verticaltext = true;
        this.styleList3[0].check = true;
      } else {
        this.listNottetool.verticaltext = false;
        this.styleList3[0].check = false;
      }
      //文字
      this.context = this.listNottetool.originaltext;
      //间距选中
      this.styleList3.forEach((v, i) => {
        if (i == 1 || i == 2) v.check = false;
      });
    },
    //初始化文本styleList1
    initializationTextstyleList1(attribute, key, i) {
      if (this.listNottetool[attribute].indexOf(key) != -1)
        this.styleList1[i].check = true;
      else this.styleList1[i].check = false;
    },
    textaClick() {
      if (this.styleList3[1].check || this.styleList3[2].check) {
        this.styleList3[1].check = false;
        this.styleList3[2].check = false;
      }
    },
    // 输入文字
    textInput(e) {
      let text = e.target.value.trim();
      let rule = this.rules;
      if (text=="请编辑文本吧") {
        return;
      }
      let row = text.split("\n");
      let saveArr = []
      for (let i = 0; i < row.length; i++) {
        let strr = row[i].split("")
        let arr = []
        for (let j = 0; j < strr.length; j++){
          arr.push(strr[j])
        }
        saveArr.push(arr)
      }
      let patt =/^=[a-zA-Z]\d+:[a-zA-Z]\d+$/;//区间
      let patt1 =/^=[a-zA-Z]:[a-zA-Z]$/;// A:B第一列到第二列
      let patt2 =/^=\d+:\d+$/;// 2:3第二行到第三行
      let qujian = patt.test(rule)
      let lie = patt1.test(rule)
      let hang = patt2.test(rule)
      let calcArr =[];
       // let position = rule.substring(1).split(":")
      let position = rule
      let str="";
      let cancalc = false;//是否要公式计算
      // console.log(saveArr[0].length);
      if(saveArr[0].length==0){
        str = ""
      }else{
        if(qujian){
          cancalc = true;
          let en = /[a-zA-Z]+/;
          let math = /\d+/;
          let startx = position[0].match(en)[0]
          let starty = position[0].match(math)[0]*1
          let endx = position[1].match(en)[0]
          let endy = position[1].match(math)[0]*1;
          let aa = maps[startx];
          let bb = starty-1;
          let cc = maps[endx];
          let dd = endy-1;
          //console.log(saveArr)
          //console.log(saveArr[0].length);
            for(let i=aa;i<=cc;i++){
              let arr = [];
              for(let j=bb;j<=dd;j++){
                arr.push(saveArr[i][j])
              }
              calcArr.push(arr)
            }
            for (let index = 0; index < calcArr.length; index++) {
              let row=""
              for (let jndex = 0; jndex < calcArr[index].length; jndex++) {
                row = row + calcArr[index][jndex]
              }
              str = str + row + "\n"
            }
        }
        else if(lie){
          let aa = position[0];
          let bb = position[1];
          let beg = maps[aa];
          let end = maps[bb];
          cancalc = true;
          // console.log(beg,end);
          for (let index = 0; index <saveArr.length; index++) {
            let row=""
            for (let jndex=beg;jndex<=end;jndex++){
              if(saveArr[index][jndex]==""){
                continue;
              }else {
                if(saveArr[index][jndex]==" "){
                  row = row + " "
                }else {
                  row = row + saveArr[index][jndex]
                }
              }
            }
            str = str + row + "\n"
          }
        }
        else if (hang){
          cancalc = true;
          // console.log(position[0],position[1]);
          for (let index = position[0]-1; index <=position[1]-1; index++) {
            let row=""
            for (let jndex=0;jndex<saveArr[index].length;jndex++){
              if(saveArr[index][jndex]==""){
                continue;
              }else {
                if(saveArr[index][jndex]==" "){
                  row = row + " "
                }else {
                  row = row + saveArr[index][jndex]
                }
              }
            }
            str = str + row + "\n";
          }
        }
      }
      // console.log(str);
      //输入后通过计算的结果信息
      if (!text) {
        text = "请编辑文本吧"
        this.listNote[0].config.originaltext=str
        this.listNote[0].config.text=str;
      }else if(!cancalc){
        //
      }
      else{
        this.listNote[0].config.originaltext=str
        this.listNote[0].config.text=str;
      }
      this.drowtext(text)
    },
    drowtext(text){
      if (this.flag) {
        if (this.historylist.length == 0) this.$emit("deductchild");
        //处理文字
        this.listNottetool.originaltext = text;
        this.context = text;
        if (this.listNottetool.verticaltext) {
          //竖向显示
          text = this.$datatools.TtoDBC(text);
          text = this.$datatools.lineFeedCutData(text);
        }
        this.textLineSpactBox(text);
        this.$emit("deductchild");
        /* this.$nextTick(() => {
          const editTask = document.getElementById("task-edit");
          let range = document.createRange();
          range.selectNodeContents(editTask);
          range.collapse(false);
          let sel = window.getSelection();
          sel.removeAllRanges();
          sel.addRange(range);
          this.$createstage.saveHistory(this);
          //  editTask.addEventListener('keydown', function(e) {
          //   e.preventDefault();
          // });
        }); */
      }
      
    }
  },
  created() {
    this.rangeInput();
    this.draggabletool();
    this.context = this.listNottetool.text;
    this.textLineSpactBox(this.listNottetool.text);
    this.initializationText();
    document.addEventListener("click", this.textaClick);
  },
  mounted() {
    const editTask = document.getElementById("task-edit");
    let that = this;
    editTask.addEventListener("compositionstart", function () {
      that.flag = false;
    });
    editTask.addEventListener("compositionend", function (e) {
      that.flag = true;
      that.textInput(e);
    });
    this.name = this.modifyele;
  },
  beforeUpdate() {
    this.rangeInput();
    this.draggabletool();
  },
  beforeDestroy() {
    document.removeEventListener("click", this.textaClick);
    if (this.listNottetool.originaltext) {
      if (this.listNottetool.originaltext == "") {
        this.listNote.forEach((v, index) => {
          if (v.config.name == this.name) {
            this.$store.commit("templateStage/TEXTDELLISTIMG", index);
            this.$emit("delchild", false);
          }
        });
      }
    } else return;
  },
};
//处理大量数据 1.懒加载+分页逻辑 2.防抖函数优化性能
</script>

<style lang="less" >
@import "../../assets/styles/frame.less";
@keyframes aaa {
  0% {
    opacity: 0;
    transform: translate3d(0, -1%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.text_ul {
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
  padding: 8px 0 10px;
  .bot();
  z-index: 99;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top: 1px solid transparent;
  li {
    height: 20px;
    cursor: pointer;
    &:hover {
      background: white;
    }
    p {
      margin-left: 6px;
    }
  }
}
// 修改提示框的样式
.tooltip {
  background: rgba(0, 0, 0, 0.711) !important;
}
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
  border-bottom-color: rgba(128, 118, 118, 0.367) !important;
}
.textnum {
  .text_num {
    float: left;
    width: 60px;
    height: 26px;
    padding: 0 6px;
    .bot();
    .divDSA();

    input {
      width: 100%;
    }

    .text_bot {
      width: 12px;
      height: 15px;
      cursor: pointer;
      .divDWCS();
    }
  }
}

.text {
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 0px !important;
  }

  .holistic();

  .text_tit {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .text_text {
    // .divAJS();
    font-size: 16px;
    padding-bottom: 16px;
    p {
      font-size: 16px;
      margin-top: 20px;
    }
    .text_con {
      width: 100%;
      background: #f6f6f6;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      overflow: hidden;
      //-bottom: 16px;
      margin-top: 16px;

      // writing-mode: vertical-rl;
      .text_blur {
        width: 1000px;
        min-height: 140px;
        font-size: 20px;
        white-space: break-spaces;
        padding: 10px 4px;
        line-height: 24px;
        -webkit-user-modify: read-write-plaintext-only; //只能输入纯文本
        -moz-user-modify: read-write-plaintext-only; //只能输入纯文本
        //user-modify: read-write-plaintext-only;//只能输入纯文本
        &:focus {
          outline: none;
        }
      }
    }
  }

  .text_div {
    font-size: 12px;
    width: 100%;
    padding: 0 16px;
    border-bottom: 1px solid @color3;

    .text_fam {
      position: relative;
      width: 70%;
      height: 26px;
      padding: 0 6px;
      margin-right: 8px;
      float: left;
      cursor: pointer;
      .bot();
      .divDSA();
    }
    .text_fontsize {
      position: relative;
      .textSizelist {
        animation: aaa 0.3s linear;
      }
      //   .text_sizelist{
      //     width: 100%;
      //     position:absolute;
      //     top: 0;
      //     left:  0;
      //     // padding: ;
      // }
    }
    .textnum();
    .text_style1 {
      width: 100%;
      height: 64px;
      .divAJS();

      .style1_div {
        img {
          cursor: pointer;
          width: 26px;
          height: 26px;
        }
      }
    }
  }

  .text_div1 {
    padding: 16px 16px;
    border-bottom: 1px solid @color3;

    .style2_div {
      .divDFJS();
      margin-bottom: 22px;
      .stylediv {
        width: 26px;
        height: 26px;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
      }
    }

    .style3_div {
      width: 100%;
      height: 26px;
      position: relative;
      .divDFJS();

      .stylediv1 {
        position: relative;
        width: 26px;
        height: 26px;
        display: inline-block;
        border-radius: 4px;
        cursor: pointer;
      }

      .style3_card1 {
        position: absolute;
        width: 212px;
        padding: 8px;
        background-color: #fff;
        box-shadow: @shadow;
        border-radius: 4px;
        top: -50px;
        left: 13px;
        .divAJS();

        .style3_num {
          width: 60px;
          height: 26px;
          border-radius: 2px;
          background-color: #f6f6f6;
          border: 1px solid #e0e0e0;
          // .cen();
          .style3_num_div {
            padding: 4px 6px 6px 6px;
            height: 26px;
            .divAJ();
            .style3_text_bot {
              height: 100%;
              .divDWCS();
            }
          }
        }
      }

      .style3_card2 {
        position: absolute;
        width: 212px;
        padding: 8px;
        background-color: #fff;
        box-shadow: @shadow;
        border-radius: 4px;
        top: -50px;
        left: 26px;
        .divAJS();

        .style3_num {
          width: 60px;
          height: 26px;
          border-radius: 2px;
          background-color: #f6f6f6;
          border: 1px solid #e0e0e0;
          // .cen();
          .style3_num_div {
            padding: 4px 6px 6px 6px;
            height: 26px;
            .divAJ();
            .style3_text_bot {
              height: 100%;
              .divDWCS();
            }
          }
        }
      }
    }
  }

  .text_div2 {
    padding: 16px 16px 18px 16px;
    border-bottom: 1px solid @color3;

    .text_line {
      font-size: 14px;
      margin-bottom: 30px;

      .text_outline {
        width: 100%;
        height: 26px;
        margin-top: 8px;
        .divAJS();

        p {
          font-size: 12px;
          padding-right: 5px;
        }

        .text_out {
          .divAJS();

          .text_color {
            .inputColor();
            margin-right: 8px;
            margin-bottom: 0;
            width: 28px;
            height: 28px;
          }
        }

        .text_nums {
          .divAJS();
          .textnum();
        }

        .text_del {
          width: 30px;
          .divDA();
          justify-content: right;
        }
      }
    }

    .text_shadow {
      font-size: 14px;

      .text_sha {
        width: 100%;
        // height: 26px;
        margin-top: 8px;

        p {
          font-size: 12px;
          margin-right: 5px;
        }

        .divAJS();

        .text_dow {
          width: 84px;
          .cen();

          .text_color {
            .inputColor();
            // margin-right: 8px;
            margin-bottom: 0;
            width: 28px;
          }
        }

        .text-shaow {
          .divDWJ();

          .text_nums {
            .divAJS();
            .textnum();
          }

          .text_outs {
            .divDA();
            margin-top: 8px;
            padding-left: 14px;

            & > p {
              font-size: 12px;
              padding-right: 3px;
            }

            .text_out {
              width: 26px;
              height: 26px;
              margin-right: 10px;
              padding-right: 18px;
              padding: 2px 6px 0 6px;
              overflow: hidden;
              .bot();

              input {
                width: 100%;
              }
            }
          }
        }

        .text_del {
          width: 40px;
          .divDA();
          justify-content: right;
        }
      }
    }
  }

  .text_div3 {
    padding: 16px 16px 0 16px;

    .text_tit {
      margin-bottom: 8px;
    }

    .text_color {
      font-size: 12px;
      .inputColor();
    }
  }

  .text_div4 {
    padding: 6px 16px 50px 16px;

    .picture_range {
      .divAJ();
      .picture_range_tit {
        font-size: 14px;
      }
      div {
        width: 60px;
        height: 26px;
        border-radius: 2px;
        background-color: #f6f6f6;
        border: 1px solid #e0e0e0;
        .cen();
      }
    }

    .picture_tool {
      margin-top: 8px;
      .divAJ();

      .picture_tools {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        .cen();
      }
    }
  }
}
.vertical_css {
  transform: rotate(90deg);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>
